<template>
  <el-dialog
    class="dict-edit"
    title="字典配置"
    top="50px"
    width="60%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isVisible"
  >
    <el-form :inline="true" :model="queryParam" class="demo-form-inline">
      <el-form-item label="名称:">
        <el-input v-model="queryParam.itemText" style="width: 160px;" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="queryParam.status" style="width: 120px;" placeholder="请选择">
          <el-option label="正常" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="search">
          {{ $t('table.search') }}
        </el-button>
        <el-button type="warning" @click="reset">
          {{ $t('table.reset') }}
        </el-button>
      </el-form-item>
      <el-dropdown v-has-any-permission="['dictItem:add']" trigger="click" class="filter-item">
        <el-button>
          {{ $t('table.more') }}<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-has-permission="['dictItem:add']" @click.native="add">{{ $t('table.add') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-form>
    <div class="dict-item-table">
      <el-table
        ref="table"
        :key="0"
        v-loading="loading"
        :data="list"
        fit
        header-row-class-name="header-style"
      >
        <el-table-column
          prop="itemText"
          label="名称"
          align="center"
        />
        <el-table-column
          prop="itemValue"
          label="数据值"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{row}">
            <el-button
              v-has-permission="['dictItem:update']"
              type="text"
              size="small"
              @click="editDictItem(row)"
            >编辑</el-button>
            <i v-has-permission="['dictItem:update','dictItem:delete']" class="icon-line-vertical" />
            <el-button
              v-has-permission="['dictItem:delete']"
              type="text"
              size="small"
              @click="deleteDictItem(row)"
            >删除</el-button>
            <el-link v-has-no-permission="['dictItem:update','dictItem:delete']" class="no-perm">
              {{ $t('tips.noPermission') }}
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="pageChange"
      />
    </div>
    <dict-item-edit
      ref="DictItemEdit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      :dict="dict"
      @success="dictItemDialogSuccess"
      @close="dictItemDialogClose"
    />
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination'
import DictItemEdit from './DictItemEdit'
export default {
  name: 'DictItem',
  components: { Pagination, DictItemEdit },
  props: {
    itemVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dict: null,
      queryParam: {},
      total: 0,
      pagination: this.initPagination(),
      list: [],
      dialog: {
        isVisible: false,
        title: ''
      },
      loading: false
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.itemVisible
      },
      set() {
        this.close()
      }
    }
  },
  methods: {
    initPagination() {
      return {
        size: 5,
        num: 1
      }
    },
    getData(val) {
      this.dict = val
      this.getDetail()
    },
    getDetail() {
      const params = {
        dictId: this.dict.id,
        size: this.pagination.size,
        current: this.pagination.num,
        ...this.queryParam
      }
      this.loading = true
      this.$get('/system/dictItem', params).then(r => {
        const data = r.data.data
        this.total = data.total
        this.list = data.records
        this.loading = false
      })
    },
    search() {
      for (const key in this.queryParam) {
        if (this.queryParam[key] === '') {
          delete this.queryParam[key]
        }
      }
      this.getDetail()
    },
    pageChange() {
      this.getDetail()
    },
    reset() {
      this.queryParam = {}
      this.getDetail()
    },
    add() {
      this.dialog.title = this.$t('common.add')
      this.dialog.isVisible = true
    },
    editDictItem(row) {
      this.$refs.DictItemEdit.setData(row)
      this.dialog.title = this.$t('common.edit')
      this.dialog.isVisible = true
    },
    dictItemDialogSuccess() {
      this.getDetail()
    },
    dictItemDialogClose() {
      this.dialog.isVisible = false
    },
    deleteDictItem(row) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.$delete(`/system/dictItem/${row.id}`).then(res => {
          this.$message({
            message: this.$t('tips.deleteSuccess'),
            type: 'success'
          })
          this.getDetail()
        })
      }).catch(() => {

      })
    },
    close() {
      this.pagination = this.initPagination()
      this.queryParam = {}
      this.list = []
      this.dict = null
      this.$emit('drawer-close')
    }
  }
}
</script>

<style lang="scss">
  .dict-item-table {
    .el-table{
      width: 100%;
    }
    .header-style th {
      background-color: #f8f8f8;
    }
    .dict-item-page{
      text-align: right;
      padding: 15px 0;
    }
    .el-button{
      padding: 0 5px;
      margin: 0;
    }
    .icon-line-vertical{
      display: inline-block;
      width: 1px;
      height: 12px;
      vertical-align: middle;
      border: 0;
      background-color: #c0c0c0;
    }
  }
</style>
